<template>
	<view>
		<u-sticky bgColor="#ffffff">
			<u-tabs :list="tabList" @click="change"  lineWidth="120rpx" keyName="title"
				lineColor="rgba(1, 185, 1, 1)" :activeStyle="{
			  color: '#000000',
			  fontWeight: 800,
			  transform: 'scale(1.05)'}" :inactiveStyle="{
			  color: '#666666',
			     fontWeight: 800,
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></u-tabs>
		</u-sticky>
		<view class="textcenter titletext hei_text bold margin_top6">點選下列付款查看付款帳號資訊</view>
		<view class="textcenter titletext hei_text bold margin_top">查看付款資訊方便您複製帳號並輸入付款點數</view>
		<view class="mainpadding_top" >
			<template  v-if="tabs==1 || tabs==''">
				<view class="titletext textcenter huang_text bold" style="font-size: 45rpx;color: #01b901;">轉帳</view>
				<view class="payimg margin_top4" @click="seletitem(item)" v-for="item in dataList[0]" :key="item.id">
					<image :src="item.image" mode=""></image>
				</view>
			</template>
			<template  v-if="tabs==2 || tabs==''">
				<view class="titletext textcenter huang_text bold" style="font-size: 45rpx;color: #01b901;">行動支付</view>
				<view class="payimg margin_top4" @click="seletitem(item)" v-for="item in dataList[1]" :key="item.id">
					<image :src="item.image" mode=""></image>
				</view>
			</template>
			<template  v-if="tabs==3 || tabs==''">
				<view class="titletext textcenter huang_text bold" style="font-size: 45rpx;color: #01b901;">信用卡</view>
				<view class="payimg margin_top4" @click="seletitem(item)" v-for="item in dataList[2]" :key="item.id">
					<image :src="item.image" mode=""></image>
				</view>
			</template>
			<template  v-if="tabs==4 || tabs==''">
				<view class="titletext textcenter huang_text bold" style="font-size: 45rpx;color: #01b901;">超商繳費</view>
				<view class="payimg margin_top4" @click="seletitem(item)" v-for="item in dataList[3]" :key="item.id">
					<image :src="item.image" mode=""></image>
				</view>
			</template>
		</view>
		<u-popup :show="show" @close="show=false" :round="10" mode="center">
			<view class="" style="min-width: 700rpx;">
				<view class="topbgc textcenter mainpadding xiaobai titletext bold">{{currentitem.name}}</view>
				<view class="textcenter titletext hei_text bold margin_top5">帳號已複製</view>
				<view class="textcenter titletext hei_text bold margin_top">{{currentitem.zh}}</view>
				<view class="textcenter titletext hei_text bold margin_top5">確認後系統會自動轉向App</view>
				<view class="textcenter titletext hei_text bold margin_top">可貼上帳號自動填入點數付款</view>
				<view class="mainpadding flexbetween margin_top5">
					<view class="submitbtn xiaobai main_size bold margin_right6" style="background-color: #999;"
						@click="show=false">重新選擇</view>
					<view class="submitbtn" style="background-color: #01b901;color: #fff;" @click="confirm">確認</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: "",
				tabList: [{
					title: "全部",
					id: 1,
				},{
					title: "轉帳",
					id: 1,
				}, {
					title: "行動支付",
					id: 2,
				}, {
					title: "信用卡",
					id: 3,
				}, {
					title: "超商繳費",
					id: 4,
				}],
				show: false,
				dataList: [],
				shop_id: "",
				currentitem: {
					name: "",
					zh: ""
				},
				paytype: 1, //1購買員工，2打印機支付,3充值
				id: "",
				shopprinter_id:"",//打印機id
				price:"",//充值的金额
			}
		},
		onLoad(options) {
			this.paytype = options.paytype
			if(options.id){
				this.id = options.id
			}
			if(options.shopprinter_id){
				this.shopprinter_id = options.shopprinter_id
			}
			if(options.price){
				this.price = options.price
			}
			this.init()
		},
		methods: {
			confirm() {
				this.show = false
				this.addorder()
				
			},
			async addorder(){
				let data = {
					type: 2, //2多元支付
					id: this.id, //購買id
					shop_id: uni.getStorageSync("shop_id"),
					paytype_id:this.currentitem.id
				}
				let url = "/api/shop/addbuyuser"
				if (this.paytype == 2) { //打印機支付
					url = "/api/shop/addtmach"
					this.$set(data,"shopprinter_id",this.shopprinter_id)
				}
				if (this.paytype == 3) { //充值
					url = "/api/shop/rechargePirce"
					delete data.type
					delete data.id
					this.$set(data,"price",this.price)
				}
				let res = await this.http.request(url, 'POST', data)
				if (res.code == 1) {
					location.href = this.currentitem.lj;
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			init() {
				let url = "/api/index/getpaytype"
				let data = {
					shop_id: uni.getStorageSync("shop_id"),
					type: this.tabs
				}
				this.http.request(url, 'POST', data).then(res => {
					if(res.code==1){
						res.data.forEach(item => {
							item.image = this.imgUrlUser + item.image
						})
						let arr = [[],[],[],[]]
						res.data.forEach(item=>{
							if(item.type==1){
								arr[0].push(item)
							}
							if(item.type==2){
								arr[1].push(item)
							}
							if(item.type==3){
								arr[2].push(item)
							}
							if(item.type==4){
								arr[3].push(item)
							}
						})
						this.dataList = arr
					}
				})
			},
			seletitem(item) {
				this.currentitem = item
				this.show = true
				this.copy(item.zh)
			},
			change(e) {
				this.tabs = e.id
				this.dataList = []
				this.init()
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => {
						uni.hideToast();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topbgc {
		background-color: #01b901;
		border-radius: 20rpx 20rpx 0 0;
	}

	.payimg {
		width: 100%;
		height: 200rpx;
		border-radius: 30rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 30rpx;
		}
	}

	.textcenter {
		text-align: center;
	}
</style>